<template>
  <div>
    <div class="goback" @click="handleGoback"></div>
    <div class="content">
      <div class="item">
        <blockContent title="监管检查" :data="leftData" />
      </div>
      <div class="item">
        <blockContent title="街区检查" :data="centerData" />
      </div>
      <div class="item">
        <blockContent title="第三方检查" :data="rightData" />
      </div>
      <!-- 下方 -->
      <div class="item">
        <div class="item-container">
          <div class="item-title">最新检查</div>
          <div class="item-content">
            <div class="main-content">
              <div class="list-th">
                <div class="list-td">最新检查</div>
                <div class="list-td">检查结果</div>
                <div class="list-td">检查时间</div>
              </div>
              <div class="new-check-list">
                <div class="no-list">暂无检查结果</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item-container">
          <div class="item-title">经营类型分布</div>
          <div class="item-content">
            <assetPull />
          </div>
        </div>
      </div>
      <div class="item item-last">
        <lastItem title="在线抽查" :data="lastItemData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import assetPull from "@/view/assetStatusDetail/Appendcharts/assetPull/index.vue";
import blockContent from "@/view/assetStatusDetail/components/blockContent/index.vue";
import lastItem from "@/view/assetStatusDetail/components/lastItem/index.vue";
import { ref, onMounted } from "vue";
import { getBaseData, getRecentCheck } from "@/api/statusData.js";

const router = useRouter();
function handleGoback() {
  router.push({ name: "homePage" });
}

// 创建初始数据结构
const createInitialData = () => ({
  title: {
    leftTitle: {
      name: "年度检查家次",
      num: 0,
    },
    rightTitle: {
      name: "本月检查家次",
      num: 0,
    },
  },
  content: {
    leftContent: {
      name: "合格家次",
      num: 0,
    },
    centerContent: {
      name: "不合格家次",
      num: 0,
    },
    rightContent: {
      name: "经营异常",
      num: 0,
    },
  }
});

// 初始化三个数据对象
const leftData = ref(createInitialData());
const centerData = ref(createInitialData());
const rightData = ref(createInitialData());

// 更新数据的函数
const updateData = (targetData, sourceData) => {
  targetData.value.title.leftTitle.num = sourceData.annual;
  targetData.value.title.rightTitle.num = sourceData.monthly;
  targetData.value.content.leftContent.num = sourceData.results.qualified;
  targetData.value.content.centerContent.num = sourceData.results.unqualified;
  targetData.value.content.rightContent.num = sourceData.results.abnormal;
};

const lastItemData = ref({
  title: {
    leftTitle: {
      name: "抽查家次",
      num: 0,
    },
    rightTitle: {
      name: "合格率",
      num: 0,
    },
  },
  content: {
    leftContent: {
      name: "合格家次",
      num: 0,
    },
    rightContent: {
      name: "不合格家次",
      num: 0,
    },
  }
})

// 数据映射关系
const dataMapping = [
  { type: '监管检查', target: leftData },
  { type: '街区检查', target: centerData },
  { type: '第三方检查', target: rightData }
];


onMounted(async () => {
  const result = await getBaseData();
  const recentCheckResult = await getRecentCheck();

  console.log(recentCheckResult.data)
  const data = result.data;
  
  lastItemData.value.title.leftTitle.num = recentCheckResult.data.total;
  lastItemData.value.title.rightTitle.num = recentCheckResult.data.rate;
  lastItemData.value.content.leftContent.num = recentCheckResult.data.qualified;
  lastItemData.value.content.rightContent.num = recentCheckResult.data.unqualified;

  // 遍历数据映射关系更新数据
  dataMapping.forEach(({ type, target }) => {
    const sourceData = data.find(item => item.type === type);
    if (sourceData) {
      updateData(target, sourceData);
    }
  });
});

</script>

<style scoped>
.goback {
  width: 7.395833vw;
  height: 1.510417vw;
  background: url("../../assets/gobackBtn.png") 50% no-repeat;
  background-size: 100% 100%;
  margin-left: 2.5vw;
  margin-bottom: 2vw;
  cursor: pointer;
}

.content {
  width: calc(100% - 3.125vw);
  height: calc(100vh - 8.64583vw);
  padding: 0 1.5625vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  gap: 15px;
  position: absolute;
  left: 0;
  top: 2vw;
  box-sizing: border-box;
}

.content .item {
  flex: 1 1 calc(33.333% - 10px);
  min-width: 0;
  box-sizing: border-box;
  width: calc(100% - 1.04167vw);
  height: calc(50% - 2.8125vw);
  background: url("@/assets/bgitem.png") 100% no-repeat;
  background-size: 93%;
  background-position: center;
  flex-direction: column;
}

.item .item-container {
  width: 90%;
  margin-left: 1.3vw;
  margin-top: 1vw;
  height: 90%;
  display: flex;
  flex-direction: column;
}

.item .item-title {
  width: 10.416667vw;
  height: 1.666667vw;
  line-height: 1.25vw;
  padding-left: 0.520833vw;
  font-size: 1.25vw;
  font-family: homeTime;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  letter-spacing: 0.104167vw;
  background: url("@/assets/home/titlebase.png");
  background-position: left bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}

.item .item-content {
  width: 100%;
  height: 100%;
}

.item-content .main-content {
  display: flex;
  flex-direction: column;
  padding: 1vw;
  height: 93%;
}

.item-content .list-th {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
}

.item-content .list-th .list-td {
  width: 40%;
  font-size: 0.8vw;
  text-align: center;
  color: #e6f7ff;
  height: 2vw;
  line-height: 2vw;
}

.main-content .new-check-list {
  height: 100%;
}

.main-content .new-check-list .no-list {
  line-height: 1.25vw;
  text-align: center;
  font-size: 0.7vw;
  color: #eef8ff;
}

.item-last .item-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.check-li.top {
  padding: 1vw 0;
  display: flex;
  justify-content: space-between;
}


.check-li.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.check-li.bottom .check-li-item {
  flex-basis: 49%;
  border: 1px solid rgba(84, 229, 252, 0.24);
  width: 100%;
  height: 100%;
}

.check-li-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.check-li-item.top-last {
  width: 10vw;
  height: 8vw;
}

.check-li-item-name {
  line-height: 1.041667vw;
  font-size: 0.729167vw;
  color: #fff;
  margin-bottom: 0.520833vw;
  display: flex;
  align-items: center;
}

.check-li-item-name .circle {
  display: inline-block;
  width: 0.260417vw;
  height: 0.260417vw;
  border: 1px solid #54e5fc;
  border-radius: 50%;
  margin-right: 0.208333vw;
}

.check-li-item-name .circle.right {
  border: 1px solid #00e6b6;
  background-color: #00e6b6;
}

.check-li-item-name .circle.yellow {
  border: 1px solid #e6e600;
  background: #e6e600;
}

.check-li-item-num {
  font-size: 1.25vw;
  font-family: homeTime;
  letter-spacing: 0.104167vw;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  color: #3ab2e7;
  margin-top: 0.625vw;
}

.check-li-item-num.yellow {
  color: #e6e600;
}

.yellow {
  color: #e6e600;
}

.purple {
  color: #e600dd;
}
</style>
